<!DOCTYPE html>
<html>

<head>
    <title>迷宫游戏</title>
    <meta name="description" content="毕设，迷宫找彩蛋" />
    <!-- <script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script> -->
    <!-- <script src="./js/package/aframe.min.js"></script> -->
    <!-- <script src="https://cdn.bootcdn.net/ajax/libs/aframe/1.2.0/aframe.min.js"></script> -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/aframe/1.2.0/aframe.min.js"></script>
    <!-- <script src="https://unpkg.com/aframe@1.2.0/dist/aframe.min.js"></script> -->
    <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.3.0/socket.io.slim.js"></script> -->
    <!-- <script src="./js/package/socket.io.slim.js"></script> -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.3.0/socket.io.slim.js"></script>



    <script src="/easyrtc/easyrtc.js"></script>
    <script src="/dist/networked-aframe.js"></script>
    <!-- <script src="https://cdn.jsdelivr.net/gh/donmccurdy/aframe-extras@v6.1.1/dist/aframe-extras.min.js"></script> -->
    <script src="./js/package/aframe-extras.min.js"></script>
    <!-- <script
        src="https://unpkg.com/aframe-environment-component@1.2.0/dist/aframe-environment-component.min.js"></script> -->
    <script src="./js/package/aframe-environment-component.min.js"></script>
    <script src="./js/package/aframe-physics-system.js"></script>
    <script src="./js/package/aframe-look-at-component.min.js"></script>

    <!-- <script src="https://unpkg.com/dayjs@1.8.21/dayjs.min.js"></script> -->
    <script src="./js/package/dayjs.min.js"></script>

    <!-- 工具 -->
    <script src="./js/utils/utils.js"></script>
    <!-- 全局变量 -->
    <script src="./js/variables.js"></script>

    <script src="js/objects/maze-mazify.objects.js"></script>
    <script src="./js/objects/portal.objects.js"></script>
    <script src="js/objects/egg.objects.js"></script>

    <!-- 通用组件 -->
    <script src="./js/component/random-color.component.js"></script>

    <!-- CSS -->
    <link rel="stylesheet" href="./css/maze-style.css" />
    <link rel="stylesheet" href="./css/index-style.css" />

</head>

<body>
    <a-scene id="maze-scene" fog="type: linear; color: #111; far: 16; near: 7" networked-scene="room: maze;debug: true;"
        physics="gravity:-9.8;">
        <!-- Assets -->
        <a-assets>
            <img id="pavement" src="./assets/images/maze/pavement.jpg" />
            <img id="brick-02" src="./assets/images/maze/brick-02.jpg" />
            <img id="ball" src="./assets/images/maze/ball.jpg" />
            <img id="red-carpet" src="./assets/images/maze/red-carpet.jpg" />
            <img id="start" src="./assets/images/maze/start.jpg" />
            <img id="finish" src="./assets/images/maze/finish.jpg" />
            <img id="boxTexture" src="./assets/images/wrapTexture.png">

            <!-- <a-mixin id="wall_base" geometry="primitive: box;" static-body></a-mixin> -->
            <a-asset-item id="egg-1" src="./assets/models/objects/easter_eggs/egg-1.glb"></a-asset-item>
            <a-asset-item id="found-egg" src="./assets/models/objects/egg/egg.glb"></a-asset-item>
            <a-asset-item id="avatar"
                src="./assets/models/objects/bendy_and_the_ink_machine_-vr_chat_avatar/avatar.glb"></a-asset-item>
            <a-assets-item id="portal_4" src="./assets/models/scene/portal_4.glb"></a-assets-item>

            <!-- template -->
            <!-- 人物 -->
            <template id="avatar-template">
                <a-entity class="avatar">
                    <a-entity position="0 1.6 0" scale="0.5 0.5 0.5">
                        <a-sphere class="head" scale="0.45 0.5 0.4">
                        </a-sphere>
                        <a-entity class="face" position="0 0.05 0">
                            <a-sphere class="eye" color="#efefef" position="0.16 0.1 -0.35" scale="0.12 0.12 0.12">
                                <a-sphere class="pupil" color="#000" position="0 0 -1" scale="0.2 0.2 0.2"></a-sphere>
                            </a-sphere>
                            <a-sphere class="eye" color="#efefef" position="-0.16 0.1 -0.35" scale="0.12 0.12 0.12">
                                <a-sphere class="pupil" color="#000" position="0 0 -1" scale="0.2 0.2 0.2"></a-sphere>
                            </a-sphere>
                        </a-entity>
                        <a-entity class="gun">
                            <a-box position="0.51 -0.13 -0.29" scale="0.19 0.23 0.67" color="#000"></a-box>
                            <a-entity class="gun-tip" position="0.51 -0.10 -0.64"></a-entity>
                        </a-entity>
                        <a-entity class="avatarId" text="value: userId;side:double;height:10;width:10;align:center"
                            position="0 1 0" rotation="0 180 0"></a-entity>
                    </a-entity>
                    <a-gltf-model src="#avatar" rotation="0 180 0"></a-gltf-model>
                </a-entity>
            </template>

            <!-- 找到的彩蛋 -->
            <!-- <template id="found-egg-template">
                <a-entity class="found-egg">
                    <a-gltf-model src="#found-egg"  static-body class="found-egg"></a-gltf-model>
                </a-entity>
            </template> -->
            <!-- 没找到的彩蛋 -->
            <!-- <template id="egg-template">
                <a-entity class="egg">
                    <a-gltf-model src="#egg-1" scale="0.5 0.5 0.5" static-body class="egg"></a-gltf-model>
                </a-entity>
            </template> -->

        </a-assets>

        <div id="blocker">
            <div id="instructions">
                <div class="description">
                    <span>这是一款迷宫找彩蛋游戏</span>
                    <span>找到彩蛋，全局广播</span>
                    <span>找到所有彩蛋，回起点进入下一关</span>
                </div>
                <h2 class="scene-load-counter">5</h2>
                <span class="main-instruction">Click to play</span>
                <span>Move: WASD</span>
                <span>Look: MOUSE</span>
                <span>Quit: ESC</span>
            </div>

        </div>



        <!-- Environment -->
        <!-- 地面 -->
        <a-box static-body width="400" height="0.2" depth="400" position="0 -0.2 0" color="#52A257"></a-box>
        <!-- 地标 -->
        <a-box static-body width="2" height="2" depth="2" position="0 4 0" color="#52A257"></a-box>

        <!-- 彩蛋 -->

        <!-- Player -->
        <a-entity position="0 1.6 0">
            <a-entity id="player" kinematic-body networked="template:#avatar-template;attachTemplateToLocal:false;"
                camera wasd-controls="acceleration:15" look-controls="pointerLockEnabled:true">
                <a-cursor></a-cursor>
                <a-sphere class="head" visible="false" random-color></a-sphere>
                <a-entity class="avatarId"></a-entity>
            </a-entity>
        </a-entity>

        <!-- Maze -->
        <a-entity mazify> </a-entity>

        <a-entity environment="preset: forest; groundColor: #3b3b3f; groundTexture: walkernoise; dressingColor: #b38d3d"
            visible="">
            <a-entity class="environment" position="0 50 0"
                light="type: hemisphere; color: #91dacf; intensity: 0.6; groundColor: #3b3b3f" visible=""></a-entity>
            <a-entity class="environment" position="-1.2 0.88 -0.55"
                light="intensity: 0.6; shadowCameraLeft: -10; shadowCameraBottom: -10; shadowCameraRight: 10; shadowCameraTop: 10"
                visible=""></a-entity>
            <a-entity rotation="-90 0 0" class="environmentGround environment" visible="" scale="1 1 4.18"
                shadow="cast: false; receive: false"></a-entity>
            <a-entity class="environmentDressing environment" visible=""></a-entity>
            <a-sky radius="200" theta-length="110" class="environment"
                material="shader: gradientshader; topColor: #24b59f; bottomColor: #eff9b7" visible="" geometry="">
            </a-sky>
        </a-entity>

        <!-- 传送门 -->
        <a-entity class="portal" position="0 20 0">
            <!-- 传送门指示牌 -->
            <a-entity class="mazeSlogan" text="value: Go to Shootgame;side:double;height:60;width:60;align:center"
                position="0 12 0" look-at="#player"></a-entity>
            <!-- 传送门模型 -->
            <a-box scale="1 2 1" src="#boxTexture" position="0 2 0" width="2.6" height="4" depth="0.5"
                portal="url:index.html" static-body class="portalWrapper">
            </a-box>
            <a-gltf-model src="#portal_4"
                animation__position="property: object3D.position.y; to: 1.6; dir: alternate; dur: 2000; loop: true">
            </a-gltf-model>
        </a-entity>
    </a-scene>

    <!-- 消息提示框 -->
    <div id="finishDialog" class="modal mazify" style="display: none;">
        <!-- Modal content -->
        <div class="modal-content">
            <div class="modal-header">
                <span>距离进入迷宫</span>
                <h2 id="counter">0</h2>
                <span>秒</span>
            </div>
            <div class="modal-body">
                <div class="left"><span>恭喜</span></div>
                <div class="right">
                    <h4 id="userId">你</h4>
                    <span>找到一个彩蛋,共有</span>
                    <h4 id="eggNumber">0</h4>
                    <span>个彩蛋</span>
                </div>

            </div>
            <div class="modal-footer">
                <span>已找到了</span>
                <h3 id="foundEggNumber">0</h3>
                <span>个彩蛋</span>
                <!-- <button class="button" onclick="reset()">Play Again</button>
                <button class="button" onclick="mazeGamecont()">Continue</button> -->
            </div>
        </div>
    </div>

    <script src="./js/sync/avatar.sync.js"></script>

    <!-- <script src="./js/objects/maze-scene.objects.js"></script> -->
    <!-- 订阅 -->
    <script src="./js/subscribe/egg.subscribe.js"></script>

    <!-- 逻辑事件 -->
    <script src="./js/events/maze.events.js"></script>
</body>

</html>